/* ===[ General ]=== */

html {
    background: #fafafa url(../img/bg.jpg);
    height: 100%;
}

body {
    -webkit-tap-highlight-color: #74bd79;
    text-shadow: 0 1px 0 #fff;
    color: #4b4f57;
    font-family: "proxima-nova", "ProximaNova-Regular", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
}


/* ===[ Typography ]=== */

p {
    line-height: 1.7;
    color: #4b4f57;
    margin-bottom: 25px;
}

a {
    padding: 3px;
    font-weight: bold;
    text-decoration: none;
    color: #74bd79;
    background: #fff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    border: 1px solid #f6f6f6;
    border-color: rgba(0, 0, 0, .05);
    border-bottom-color: rgba(0, 0, 0, .08);
    white-space: nowrap;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01));
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.no-rgba a { border: 1px solid #f1f1f1 }

a:hover {
    color: #77b2d4;
    background: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, .08);
    border-bottom-color: rgba(0, 0, 0, .13);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.no-rgba a:hover { border-color: #e9e9e9 }

a.active,
a:active {
    color: #fff;
    background: #484f53 url(../img/darkBG.jpg);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .4) inset, 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .4) inset, 0 1px 0 #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .4) inset, 0 1px 0 #fff;
}

li {
    line-height: 1.7;
    list-style: circle;
    list-style-position: inside;
    padding: 10px 0;
}

strong { font-weight: bold }

em { font-style: italic }

small { font-size: 14px }

code,
pre {
    color: #77b2d4;
    padding: 3px;
    background: #fff;
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "proxima-nova", "ProximaNova-Light", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: lighter;
}

h2 {
    font-size: 32px;
    padding: 0 0 10px;
    border-bottom: 1px dotted #c6c8c9;
    border-bottom: 1px dotted rgba(0, 0, 0, .15);
}

    h2 span {
        font-size: 22px;
        margin-left: 5px;
        color: #9f9f9f;
        color: rgba(0, 0, 0, .4);
    }

h3 {
    font-size: 26px;
    margin-bottom: 15px;
}

h4 {
    font-weight: bold;
    color: #afafaf;
    font-size: 20px;
    margin-bottom: 20px;
}

::-moz-selection,
::selection {
    background-color: #74bd79;
    color: #fff;
    text-shadow: none;
    -webkit-box-shadow: 0 1px 0 #fff, 0 0 1px rgba(0, 0, 0, .2) inset;
    -moz-box-shadow: 0 1px 0 #fff, 0 0 1px rgba(0, 0, 0, .2) inset;
    box-shadow: 0 1px 0 #fff, 0 0 1px rgba(0, 0, 0, .2) inset;
}


/* ===[ Layout ]=== */

.wrap {
    width: 90%;
    margin: 0 auto;
    max-width: 1320px;
}

.section-wrap {
    padding-bottom: 20px;
    border-bottom: 1px dotted #c6c8c9;
    border-bottom: 1px dotted rgba(0, 0, 0, .15);
}

.lt-ie8 .section-wrap { zoom: 1; }

.section-1 {
    width: 31%;
    float: left;
    min-height: 1px;
}

.section-2 {
    width: 66%;
    float: left;
    margin: 0 0 0 3%;
    min-height: 1px;
}


/* ===[ Header ]=== */

.topline {
    background: #484f53 url(../img/darkBG.jpg);
    height: 2px;
    border-bottom: 1px solid #000;
    -moz-box-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
}

h1.title {
    float: left;
    font-size: 50px;
}

    h1.title a {
        color: #484f53;
        text-transform: uppercase;
        font-family: "ltc-squareface-sc", sans-serif;
        text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-mask-image: url(../img/mask.png);
    }

h1.title,
#top-buttons { padding: 46px 0 }

#top-buttons {
    display: block;
    float: right;
}

    #top-buttons > a {
        font-size: 20px;
        display: block;
        float: left;
        text-align: center;
    }

#download {
    padding: 10px 20px 10px 47px;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/dl.svg) no-repeat 16px 50%, #fff linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.no-inlinesvg #download { background: #fff url(../img/dl.png) no-repeat 16px 50%; }

#download:active { background: url(../img/dl.svg) no-repeat 16px 50%, #484f53 url(../img/darkBG.jpg); }

.no-inlinesvg #download:active { background: #484f53 url(../img/dl.png) no-repeat 16px 50%; }

#github {
    padding: 10px 20px 10px 39px;
    border-left: 0;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    background: url(../img/git.svg) no-repeat 13px 55%, #fff linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .01)) 0 0 repeat;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.no-inlinesvg #github { background: #fff url(../img/git.png) no-repeat 13px 55%; }

#github:active { background: url(../img/git.svg) no-repeat 13px 55%, #484f53 url(../img/darkBG.jpg); }

.no-inlinesvg #github:active { background: #484f53 url(../img/git.png) no-repeat 13px 50%; }


/* ===[ Upper area ]=== */

#upper {
    background-color: #4b4f57;
    background-image: url(../img/darkBG.jpg);
    color: #fff;
    text-shadow: 0 -1px 0 #000;
    padding: 50px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

    #upper h2,
    #upper .section-1 { border-bottom-color: #000 }

    #upper .button {
        color: #fff;
        text-shadow: 0 -1px 0 #000;
        padding: 4px 5px 5px;
        display: inline-block;
        border: 1px solid #34373a;
        border: 1px solid rgba(0, 0, 0, .2);
        border-bottom: 1px solid #2f3234;
        border-bottom: 1px solid rgba(0, 0, 0, .35);
        background: url(../img/black10.png);
        background: rgba(0, 0, 0, .1);
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
        background: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
        background: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
        background: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
        background: linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
        -webkkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, 0) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, 0) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, 0) inset;
    }

    #upper .button:hover {
        border: 1px solid #2e3133;
        border: 1px solid rgba(0, 0, 0, .3);
        border-bottom: 1px solid rgba(0, 0, 0, .45);
        border-bottom: 1px solid #25282a;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04) inset;
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04) inset;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04) inset;
    }

    #upper .button:active,
    #upper .button.active {
        color: #8acdf3;
        border: 1px solid #66899e;
        border: 1px solid rgba(138, 205, 243, .5);
        -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset;
        -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .7) inset;
    }

.upper a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
    background: url(../img/black10.png);
    background: rgba(0, 0, 0, .1);
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.upper a:hover,
.upper a:active,
.upper a.active { color: #8acdf3 }

.rs-wrap { float: right }


/* ===[ Footer ]=== */

#footer {
    padding: 25px 0;
    border-top: 1px solid #fff;
}

.lt-ie8 #footer { zoom: 1; }

#copy { float: right }


/* ===[ Index Page ]=== */

.checklist {
    padding-top: 25px;
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
    *zoom: 1;
}

    .checklist li {
        list-style: none;
        *zoom: 1;
        padding-left: 30px;
        background: url(../img/check.svg) no-repeat left center;
    }

.no-inlinesvg .checklist li { background: url(../img/check.png) no-repeat left center }

#nav { margin: 50px 0; }

.lt-ie8 #nav { zoom: 1; }

    #nav ul li {
        display: block;
        float: left;
        width: 25%;
        margin: 0;
        padding: 0;
    }

        #nav ul li a {
            display: block;
            text-align: center;
            padding: 20px 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            font-size: 20px;
            -moz-transition: none;
            -webkit-transition: none;
            -o-transition: none;
            -ms-transition: none;
            transition: none;
        }

.lt-ie8 #nav ul li a { zoom: 1; }

.lt-ie8 #nav ul li { width: 24.9% }

#nav ul li a { border-left: none }

#nav ul li:first-child a {
    border-left: 1px solid #f1f1f1;
    border-left-color: rgba(0, 0, 0, .05);
}

#nav ul li:first-child a:hover {
    border-left-color: #e9e9e9;
    border-left-color: rgba(0, 0, 0, .08);
}

#nav ul li a span {
    font-weight: normal;
    font-size: 16px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
    color: #999;
    display: inline-block;
    margin-top: 6px;
    cursor: pointer;
}

#nav ul li:first-child a {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

#nav ul li:last-child a {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

#nav ul li a.active span,
#nav ul li a:active span {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
}

#pages,
#info { position: relative; }

    #pages > li,
    #info > div {
        list-style: none;
        opacity: 0;
        position: absolute;
        padding: 0;
        top: -9999em;
        height: 0;
        width: 0;
        left: -9999em;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
    }
    
    .lt-ie8 #pages > li { zoom: 1; }

    #pages > li.active,
    #info > div.active {
        position: relative;
        height: auto;
        width: auto;
        top: 0;
        left: 0;
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-transition-property: -webkit-transform, opacity;
        -webkit-transition-duration : .4s;
        -webkit-transition-easing: ease-in-out;
        -moz-transition-property: -moz-transform, opacity;
        -moz-transition-duration : .4s;
        -moz-transition-easing: ease-in-out;
        -o-transition-property: -o-transform, opacity;
        -o-transition-duration : .4s;
        -o-transition-easing: ease-in-out;
        -ms-transition-property: -ms-transform, opacity;
        -ms-transition-duration : .4s;
        -ms-transition-easing: ease-in-out;
        transition-property: transform, opacity;
        transition-duration : .4s;
        transition-easing: ease-in-out;
    }

    #pages > li > ol > li,
    #pages > li > ul > li {
        color: #afafaf;
        padding: 30px 0 10px;
        border-top: 1px solid #fff;
        border-bottom: 1px dotted #c6c8c9;
        border-bottom: 1px dotted rgba(0, 0, 0, .15);
    }

    .lt-ie8 #pages > li > ol > li,
    .lt-ie8 #pages > li > ul > li { zoom: 1; }

    #pages > li > ol > li:last-child,
    #pages > li > ul > li:last-child { border-bottom: none }

    #pages > li > ol > li.last-child,
    #pages > li > ul > li.last-child { border-bottom: none }

    #pages > li > ol > li,
    #pages > li > ul > li { list-style-type: none }

.reg-list { margin-bottom: 15px; }

.reg-list li { color: #4b4f57; padding: 6px 0; }

.reg-list li:first-child { padding-top: 0; }

#changelog li { list-style-type: none; }


/* ===[ Demo Page ]=== */

#legend {
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
    padding-top: 15px;
}

#legend li {
    list-style-type: none;
    font-weight: bold;
}

#legend li .bobble { position: static; }

.translist { padding-top: 25px }

    .translist li {
        list-style: none;
        display: block;
        float: left;
        width: 50%;
        *width: 49.9%;
    }

        .translist li a { position: relative }

.bobble-key,
.bobble-js,
.bobble-css,
.bobble-3d {
    font-weight: bold;
    position: absolute;
    font-size: 10px;
    background: #74bd79;
    border-radius: 2px;
    top: -8px;
    padding: 3px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    color: #fff!important;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
}

.bobble-js { right: -13px }
.bobble-3d { right: -15px }
.bobble-css { right: -21px }

.bobble-key.unsupported,
.bobble-js.unsupported,
.bobble-css.unsupported,
.bobble-3d.unsupported { background: #C4544E }


/* ===[ Demo 2 Page ]=== */

#info > div {
    -webkit-transform: translateY(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
}

#info > div p {
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

#info > div p:first-of-type,
#info > div p.first-of-type {
    padding-top: 25px;
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
}

#info > div.active {
    -webkit-transition-duration : .8s;
    -moz-transition-duration : .8s;
    -o-transition-duration : .8s;
    -ms-transition-duration : .8s;
    transition-duration : .8s;
}


/* ===[ Media queries ]=== */

@media screen and (max-width: 1024px) { 
    .rs-wrap {
        margin: 0 auto;
        float: none;
    }

    h1.title { font-size: 47px }

    h1.title,
    #top-buttons { padding: 40px 0 }

    .section-1,
    .section-2 {
        width: 100%;
        margin: 0;
    }

        .section-1 .checklist li {
            display: inline-block;
            width: 50%;
            *width: 45%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            float: left;
        }

        .section-1 .checklist li:nth-child(odd) {
            width: 44%;
            margin-right: 5%;
        }

    .section-1 {
        padding: 0 0 25px 0;
        border-bottom: 1px dotted #c6c8c9;
        border-bottom: 1px dotted rgba(0, 0, 0, .15);
    }

    .section-2 {
        border-top: 1px dotted #808487;
        border-top: 1px dotted rgba(255, 255, 255, .25);
        padding: 39px 0 0 0;
    }

    .translist li { width: 33.3% }
}

@media screen and (max-width: 768px) { 
    h1.title { font-size: 41px }

    h1.title,
    #top-buttons { padding: 30px 0 }

        #top-buttons > a { font-size: 17px }

    h2 { font-size: 26px }

    .divide { margin-bottom: 12px }

    #footer { padding: 20px 0 }
}

@media screen and (max-width: 640px) { 
    #nav ul li { width: 50% }

    .lt-ie8 #nav ul li { width: 49.9% }

    #top-buttons,
    h1.title {
        float: none;
        clear: both;
    }

    h1.title { padding-bottom: 0 }

    #top-buttons { padding-top: 20px }

        #top-buttons > a {
            width: 50%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    h1.title { text-align: center }

    #nav ul li a {
        border-color: #f1f1f1;
        border-color: rgba(0, 0, 0, .05);
    }

    #nav ul li:first-child a {
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
        border-radius: 5px 0 0 0;
    }

    #nav ul li:nth-child(2) a,
    #nav ul li.nav-2 a {
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
        border-radius: 0 5px 0 0;
    }

    #nav ul li:nth-child(3) a,
    #nav ul li.nav-3 a {
        border-top: none;
        border-left: 1px solid #f1f1f1;
        border-left-color: rgba(0, 0, 0, .05);
        -webkit-border-radius: 0 0 0 5px;
        -moz-border-radius: 0 0 0 5px;
        border-radius: 0 0 0 5px;
    }

    #nav ul li:last-child a,
    #nav ul li.nav-4 a {
        border-top: none;
        -webkit-border-radius: 0 0 5px 0;
        -moz-border-radius: 0 0 5px 0;
        border-radius: 0 0 5px 0;
    }
}

@media screen and (max-width: 480px) {
    .rs-slide-bg { padding: 5px!important }

    .rs-thumb-wrap > a { padding: 2px!important }

    .translist li { width: 50%; *width: 49.9%;  }
}

@media screen and (max-width: 320px) { 
    h1.title { font-size: 38px }

    .checklist li {
        width: 100%!important;
        margin-right: 0!important;
    }
}